@import url("https://fonts.googleapis.com/css?family=Baloo+2&subset=latin-ext");
* {
  font-family: "Baloo 2", cursive;
}
:root {
  --yellow: linear-gradient(151deg, rgba(242,209,7,1) 0%, rgba(255,138,138,1) 100%);
  --green: linear-gradient(139deg, rgba(0,188,212,1) 0%, rgba(139,195,74,1) 100%);
  --red: linear-gradient(120deg, rgba(255,152,0,1)  0%, rgba(233,30,99,1) 100%);
  --pink: linear-gradient(147deg, rgba(104,190,252,1) 0%, rgba(229,55,252,1) 100%);
  --turquoise: linear-gradient(307deg, rgba(0,191,242,1) 0%, rgba(135,241,146,1) 100%);
}
html,
body {
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  background-color: #f2f5f7;
  display:flex;
  align-items:center;
  flex-direction:column;
  justify-content: center;
}
.softBar{
  border-radius: 1rem;
  margin-bottom: 1rem;
  background: transparent;
  display: flex;
  padding: 0.25rem;
  justify-content: space-around;
  align-items: center;
  min-height: 4rem;
  min-width: 20rem;
  max-width: 20rem;
  box-shadow: inset 6px 6px 10px #d1d9e6, inset -6px -6px 10px #fff;
}
.softButton{
  cursor: pointer;
  min-width: 2.6rem;
  min-height: 2.55rem;
  max-width: 2.6rem;
  width: 2.6rem;
  max-height: 2.55rem;
  background-color: transparent;
  border-radius: 0.7rem;
  display: flex;
  border:none;
  margin:0;
  align-items: center;
  justify-content: center;
  box-shadow: 6px 6px 10px #d1d9e6, -6px -6px 10px #fff;
}
.fas{
  font-size: 1.5rem;
}
.green > .fas{
  background: var(--green);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  color:transparent;
}

.yellow > .fas{
  background: var(--yellow);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  color:transparent;

}

.red > .fas{
  background: var(--red);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  color:transparent;

}

.pink > .fas{
  background: var(--pink);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  color:transparent;
}

.turquoise > .fas{
  background: var(--turquoise);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  color:transparent;
}

.yellow.selected{
  background:var(--yellow);
}
.green.selected{
  background:var(--green);
}
.pink.selected{
  background:var(--pink);
}
.red.selected{
  background:var(--red);
}
.turquoise.selected{
  background:var(--turquoise);
}
.selected{
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.25),
    inset -2px -2px 5px rgba(255, 255, 255, 0.25);
}
.selected > .fas{
  color:#f2f5f7
}

.contentBox{
  border-radius: 1rem;
  margin-bottom: 1rem;
  background: transparent;
  display: flex;
  flex-direction:column;
  padding: 1.5rem;
  min-height: 30rem;
  min-width: 17.5rem;
  max-width: 17.5rem;
  margin:0 1rem 0 1rem;
  box-shadow: 6px 6px 10px #d1d9e6, -6px -6px 10px #fff,
    inset 6px 6px 10px #d1d9e6, inset -6px -6px 10px #fff;
}
.demoCard {
  border-radius: 10px;
  margin: 0 0 1.5rem 0;
  padding: 0.7rem;
  position: relative;
  border: 2px solid transparent;
  box-shadow: 6px 6px 10px #d1d9e6, -6px -6px 10px #fff,
    inset 6px 6px 10px #d1d9e6, inset -6px -6px 10px #fff;
  color:rgba(0, 0, 0, 0.7);
}
a{
  color:rgba(0, 0, 0, 0.7);
}
.demoCard::before{
  content: "";
  border-radius: 10px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(233, 30, 99);
  background: linear-gradient(
    90deg,
    rgba(255, 152, 0, 1) 0%,
    rgba(233, 30, 99, 1) 100%
  );
  filter: opacity(25%);
}
h1{
  margin-left: 1rem;
  margin-top: 0.5rem;
  opacity: 0.5;
}
